import React ,{ Component } from 'react';
import ReactPullLoad, { STATS } from "react-pullload";
import {connect} from 'react-redux';

import { actions } from './_index.js';

class View extends Component{
    constructor(props){
        super(props);
        this.state = {
            ajaxCfg:{
                url:'/home/mediareports',
                cfg:{
                    page_number:'1',
                    page_size:'10',
                },
                headers:{

                }
            },
            hasMore: true,
            action: STATS.init,
            index: 8,
            page:1
        }
    }
    handleAction = action => {
        // console.info(action, this.state.action, action === this.state.action);
        //new action must do not equel to old action
        if (action === this.state.action) {
            return false;
        }
        if (action === STATS.refreshing) {
            //刷新
            this.handRefreshing();
        } else if (action === STATS.loading) {
            //加载更多
            this.handLoadMore();
        } else {
            //DO NOT modify below code
            this.setState({
                action: action
            });
        }
    }
    handRefreshing = () => {
        if (STATS.refreshing === this.state.action) {
            return false;
        }
        setTimeout(() => {
            //refreshing complete
            this.setState({
                hasMore: true,
                action: STATS.refreshed,
                index: 8
            });
            this._init();
        }, 3000);
        this.setState({
            action: STATS.refreshing
        });
    }
    handLoadMore = () => {
        const { pddData } = this.props;
        if (STATS.loading === this.state.action) {
            return false;
        }
        //无更多内容则不执行后面逻辑
        if (!this.state.hasMore) {
            return;
        }

        setTimeout(() => {
            if (this.state.index === 0) {
                this.setState({
                  action: STATS.reset,
                  hasMore: false
                });
            } else {
                this.setState({
                  action: STATS.reset,
                  index: this.state.index - 1
                });
                this.setState((state,props)=>{
                    page:state.page++
                })
                this.getPddList(this.state.page,pddData.pageData.data);
            }
        }, 3000);

        this.setState({
            action: STATS.loading
        });
    };
    getPddList(page,prevData){
        const { getPddFn } = this.props;
        const { ajaxCfg } = this.state;
        ajaxCfg.cfg.page_number = page;
        getPddFn('自动获取',ajaxCfg,prevData);
    }
    _init(){
        this.getPddList(1,[]);
    }
    componentDidMount(){
        this._init();
    }
    lists(){
        const { pddData } = this.props;
        return pddData.pageData.data.map((val,index)=>{
            return(
                <li key={val.id}>{index}-{val.main_title}</li>
            )
        })
    }
    render(){
        const { pddData } = this.props;
        const { hasMore } = this.state;
        return(
            <React.Fragment>
            <ReactPullLoad
              downEnough={150}
              action={this.state.action}
              handleAction={this.handleAction}
              hasMore={hasMore}
              distanceBottom={1000}
            >
                <div>ajax page</div>
                <div className="div1"></div>
                <div className="div1"></div>
                <div className="div1"></div>
                <div className="div1"></div>
                <div className="div1"></div>
                {
                    pddData.pageData
                    ?
                    <ul>{this.lists()}</ul>
                    :
                    ''
                }
            </ReactPullLoad>
            </React.Fragment>
        )
    }
}
const mapStateToProps = (state)=> {
  return {
      pddData:state.ajaxPage
  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
	return {
		getPddFn: (text,ajaxCfg,prevData) => dispatch(actions.getFn(text,ajaxCfg,dispatch,prevData))
	}
};

export default connect(mapStateToProps,mapDispatchToProps)(View);
